<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<style type="text/css">
<!--
.filter-hidden{display:none}
.ztree li span.button.diy01_ico_open{margin-right:2px; background: url('ccay/web/resource/skins/default/plugins/ztree/img/diy/1_open.png') no-repeat;}
.ztree li span.button.diy01_ico_close{margin-right:2px; background: url('ccay/web/resource/skins/default/plugins/ztree/img/diy/1_close.png') no-repeat;}
.ztree li span.button.diy01_ico_docu{margin-right:2px; background: url('ccay/web/resource/skins/default/plugins/ztree/img/diy/3.png')  no-repeat;}
-->
</style>

<script type="text/javascript" src="ccay/example/ui/tree/tree.js" />
<script type="text/javascript" src="ccay/js/ui/plugins/tree/ccayTree.js" charset="utf-8" ></script>

<div id="treeTab">
	<div title="API">
		<div>
			<h2>1、非弹出树控件：$.fn.ccayTree = function(dataOrUrl, options, callback)</h2>
			<h3>作用：tree 控件接口,根据传入参数生成节点树</h3>
			<h3>备注：tree 控件基于jQuery zTree，如有其它疑问可参照jQuery zTree的API说明</h3>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="dataOrUrl"></samp> <span class="ccay-form-input">
								{Object}
								<p>节点数据，或返回节点数据的服务路径.
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="options"></samp> <span class="ccay-form-input">
								<div class="ccay-form-body">
									  <ul>
									      <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="参数项"></samp>
										 	<span class='ccay-form-input'>说明</span>
										  </li>
									  </ul>
								</div>	  
								<div class="ccay-form-custom">
									  <ul>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="expandLevel"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>树展开的层级，0级为树的根，以此类推
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="filter"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>是否具有即时搜索过滤功能，ture为具有
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="checkType"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>树节点可以被选中的类型：不赋值默认为普通单选，"single"为带radio选择框的单选，其他值为多选
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="checkboxType"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>当节点可以多选时，设置父子之间联动，默认值为{"Y":"p","N":"s"}；设置为{"Y":"ps","N":"ps"}即可实现选中和取消都与其父子联动，Y 属性定义 checkbox 被勾选后的情况，N 属性定义 checkbox 取消勾选后的情况，"p" 表示操作会影响父级节点，"s" 表示操作会影响子级节点，请注意大小写，不要改变
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="showRemoveBtn"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>是否显示删除按钮，ture为显示
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="onCheck"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>选中树节点的触发函数
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="onDblClick"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>双击树节点的触发函数
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="onClick"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>单击树节点的触发函数，函数原型onClick(event, treeId, treeNode)，第3个参数treeNode可获得节点数据，进行相应的处理
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="onRemove"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>删除树节点的触发函数，函数原型onRemove(treeId, treeNode)，第二个参数treeNode可获得节点数据，进行删除
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="key"></samp>
										 	<span class='ccay-form-input'>
										 	     <div class="ccay-form-body ccay-form-custom">
												  <ul>
												      <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey="参数项"></samp>
													 	<span class='ccay-form-custom'>说明</span>
													  </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey="check"></samp>
													 	<span class='ccay-form-custom'>
													 	     <p>节点数据中保存check状态的属性名称
													 	</span>
													 </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey="name"></samp>
													 	<span class='ccay-form-custom'>
													 	     <p>节点数据中保存节点名称的属性名称
													 	</span>
													 </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey=children></samp>
													 	<span class='ccay-form-row'>
													 	     <p>节点数据中保存子节点数据的属性名称
													 	</span>
													 </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey=title></samp>
													 	<span class='ccay-form-row'>
													 	     <p>节点数据中保存提示信息的属性名称
													 	</span>
													 </li>
												 </ul>
										       </div>
										 	</span>
										 </li>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="simpleData"></samp>
										 	<span class='ccay-form-input'>
										 	     <div class="ccay-form-body ccay-form-custom">
												  <ul>
												      <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey="参数项"></samp>
													 	<span class='ccay-form-custom'>说明</span>
													  </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey="idKey"></samp>
													 	<span class='ccay-form-custom'>
													 	     <p>节点数据中保存唯一标识的属性名称
													 	</span>
													 </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey="pIdKey"></samp>
													 	<span class='ccay-form-custom'>
													 	     <p>节点数据中保存其父节点唯一标识的属性名称
													 	</span>
													 </li>
													  <li class="ccay-form-row">
													 	<samp class="i18n" i18nKey=rootPId></samp>
													 	<span class='ccay-form-row'>
													 	     <p>根节点父节点id，即根节点 pIdKey 指定的属性值
													 	</span>
												 </ul>
										       </div>
										 	</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="selectItems"></samp>
										 	<span class='ccay-form-input'>
										 	<p>{Array}多选tree，根据该值回选。与selectField配合使用。
										 	</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="selectField"></samp>
										 	<span class='ccay-form-input'>
										 	<p>{String}多选tree，根据该字段回选。与selectItems配合使用。
										 	</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="displayName"></samp>
										 	<span class='ccay-form-input'>
										 	<p>{String}指定显示属性，不指定则默认为"name"
										 	</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="txtSelectedEnable"></samp>
										 	<span class='ccay-form-input'>
										 	<p>{Boolean}设置 tree 是否允许选择节点文本，默认false（zTree 3.5）
										 	</span>
										 </li>
									 </ul>
							       </div>
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="callback"></samp> <span class="ccay-form-input">
								{Object}
								<p>callback 回调方法
						</span></li>
					</ul>
				</div>
			</form>
		</div>
		<div>
			<h2>2、弹出树控件：Ccay.Component.popupTree(title,dataOrUrl,options,selectCallback,width,height)</h2>
			<h3>作用：弹出 tree 控件接口，树会以弹出窗口的方式展现</h3>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="title"></samp> <span class="ccay-form-input">
								{String}
								<p>弹出窗口的标题.
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="dataOrUrl"></samp> <span class="ccay-form-input">
								{Object}
								<p>节点数据，或返回节点数据的服务路径，同非弹出树的dataOrUrl参数.
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="options"></samp> <span class="ccay-form-input">
								{Object}
								<p>树的设置参数，具体参数项同非弹出树的options参数，请参照上面的说明.
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="selectCallback"></samp> <span class="ccay-form-input">
								{Object}
								<p>弹出树选择完毕，点击确定之后的回调函数，回调函数的形式为：function(nodes)，nodes参数代表被选中的节点.
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="width"></samp> <span class="ccay-form-input">
								{Integer}
								<p>弹出窗口的宽度.
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="height"></samp> <span class="ccay-form-input">
								{Integer}
								<p>弹出窗口的高度.
						</span></li>
					</ul>
				</div>
			</form>
		</div>
		<h3 style="padding-top:20px;color:red;"></h3>
	</div>
	<div title="普通树">
<div style='padding-left:30px'>
        <div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	<ul id="registryTree" style="width:100%;height: 398px;"></ul>
       </div>
       <div style="float: right; width:68%;">
	<h4><span class="i18n" i18nKey="ccay.registry.label.nodeDetail"></span></h4>
	<form id="registryForm" class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">		
             <div name="hiddenRegistryDiv">
                   <input type="hidden" name="propertyId" id="propertyId"/>
             </div>
			<ul>
			<li class="ccay-form-row">
			  <samp class="init i18n require" i18nKey="ccay.security.label.dictionaryName"></samp>
			  <span class='ccay-form-input'>
			 	  <input type="text" name="name" id="name" class="required specialch2"  maxlength="1000" style="width:70%" />
			  </span>
			</li> 
			<li class="ccay-form-row">
			  <samp class="init i18n require" i18nKey="ccay.security.label.dictionaryParentId"></samp>
			  <span class='ccay-form-input'>
			 	  <input type="text" id="parentName" name="parentName" readOnly="true"  style="width:70%"/>
			 	  <input type="hidden" id=parentId name="parentId" />
			  </span>
			</li>
		</ul>
		</div>			
	</form>
	<!-- 
	<div class="ccay-operate">
		<span class="ccay-button hasPermission" ccayPermission="Service$Registry$create" onclick="Ccay.example.ui.tree.addItem()">
			<a class="ccay-icon add"></a>
			<label class="i18n" i18nKey="ccay.common.button.add"></label>
		</span>		
		<span class="ccay-button hasPermission" ccayPermission="Service$Registry$create|Service$Registry$update" onclick="Ccay.example.ui.tree.save()">
			<a class="ccay-icon save"></a>
			<label class="i18n" i18nKey="ccay.common.button.save"></label>
		</span>			
	</div>
	 -->
 </div>
       </div>
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='testSingleTreehtml'>
&lt;!-- 树容器 -->
&lt;div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	&lt;ul id="testRegistryTree" style="width:100%;height: 398px;">&lt;/ul>
&lt;/div>
&lt;div style="float: right; width:68%;">
	&lt;h4>&lt;span class="i18n" i18nKey="ccay.registry.label.nodeDetail">&lt;/span>&lt;/h4>
	&lt;!-- 节点数据表单容器 -->
	&lt;form id="testRegistryForm" class="init ccay-form">
		&lt;div class="ccay-form-body ccay-form-custom">		
             &lt;div name="hiddenRegistryDiv">
                   &lt;input type="hidden" name="propertyId" id="propertyId"/>
             &lt;/div>
			&lt;ul>
			&lt;li class="ccay-form-row">
			  &lt;samp class="init i18n require" i18nKey="ccay.security.label.dictionaryName">&lt;/samp>
			  &lt;span class='ccay-form-input'>
			 	  &lt;input type="text" name="name" id="name" class="required specialch2"  maxlength="1000" style="width:70%" />
			  &lt;/span>
			&lt;/li> 
			&lt;li class="ccay-form-row">
			  &lt;samp class="init i18n require" i18nKey="ccay.security.label.dictionaryParentId">&lt;/samp>
			  &lt;span class='ccay-form-input'>
			 	  &lt;input type="text" id="parentName" name="parentName" readOnly="true"  style="width:70%"/>
			 	  &lt;input type="hidden" id=parentId name="parentId" />
			  &lt;/span>
			&lt;/li>
		&lt;/ul>
		&lt;/div>			
	&lt;/form>
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='testSingleTreejs'>
var testForm = $S("#testRegistryForm");	
testInitRegistryTree();		
/**普通单选树实现*/
function testInitRegistryTree(fn){
	var  setting={
		expandLevel: "0", /**设置展现的层级*/
		filter: true, /**设置搜索框*/
		showRemoveBtn:true,/**设置是否显示删除按钮*/
		onClick: testOnTreeClick, /**设置点击节点触发函数*/
		onRemove: testOnRemoveRegistryNode, /**设置点击删除节点按钮触发函数*/
		simpleData:{
			idKey:"propertyId", /**节点数据中保存唯一标识的属性名称*/
			pIdKey:"parentId", /**节点数据中保存其父节点唯一标识的属性名称*/
			rootPId:"0" /**根节点父节点id，即根节点 pIdKey 指定的属性值*/
			}
		};    
	$S('#testRegistryTree').ccayTree("services/manage/registry/list",setting,function(data){
		var tree=$S('#testRegistryTree').getCcayTreeManager();	   
		var node=tree.getNodeByParam("propertyId",0);	        
		tree.expandNode(node,true);
		fn && fn();
	});	
}
/** 单击树时，form显示数据，数据可修改（更新）*/
function testOnTreeClick(event, treeId, treeNode) {
	$S("#testSelectParent").show();
	var treeObject=$S('#testRegistryTree').getCcayTreeManager();		
	/**得到父节点的数据*/
	var parentNode = treeObject.getNodeByParam("propertyId",treeNode.parentId);
	/**name不可修改*/
	testForm.nameChild("name").attr("readOnly",true);
	/**如果有子节点，则不能修改父节点，隐藏按钮*/
	if( treeNode.isParent ){
		/**选择父节点按钮不可用*/
		$S("#testSelectParent").hide();
	}
	/**form显示数据*/
	testForm.jsonData(treeNode);
	/** parentPath 处理*/
	if(treeNode.parentId==0){
		testForm.nameChild("parentName").val("root");
	}else{
	   	testForm.nameChild("parentName").val(parentNode.name);
	}
	testForm.nameChild("parentId").val(treeNode.parentId);
	testForm.valid();
	return false;
}
/**创建一颗栏目树*/
page.testSelectParent = function() {
	var setting={simpleData:{idKey:"propertyId",pIdKey:"parentId",rootPId:"0"},expandLevel:1}; 
	Ccay.doGet("services/ccay/registry/list","",function(data){	 
		data.push({propertyId:0,parentId:-1,name:'root',value:'root', parentPath:'root'}); 
		Ccay.Component.popupTree("ccay.sitemap.selectparent",data,setting,function(nodes){
			if(nodes.length>0){
				treeNode=nodes[0];
				if(treeNode.parentPath == "root"){
					path = treeNode.name;
				}else{
					var path = ( treeNode.parentPath+ "."+ treeNode.name);
					path = path.substring(path.indexOf('root.'),path.length);
				}
				/**更新时父节点不能选择自己本身*/
				if(testForm.nameChild("propertyId").val() !='' && testForm.nameChild("propertyId").val() == treeNode.propertyId){
				Ccay.UI.showMessage("ccay.registry.message.chooseParentNodeErr","warn");
					return false;
				}else{
					testForm.nameChild("parentName").val(treeNode.name);
					testForm.nameChild("parentId").val(treeNode.propertyId);
					testForm.nameChild("parentPath").val(path);
				}
			}
		});
	})
};
/**删除节点 */
function testOnRemoveRegistryNode(treeId, treeNode){
	if(treeNode.isParent) {
		Ccay.UI.showMessage("ccay.security.message.canNotDelete","warn");
		return false;
	}else{
		Ccay.UI.confirm("ccay.security.message.confirmDelete",function(bool){
			if(bool){
				Ccay.UI.topBox("ccay.common.message.deleteSuccess");
				var treeObject=$S('#testRegistryTree').getCcayTreeManager();
				treeObject.removeNode(treeNode);
				testForm.ccayReset();
			}
		});
	}
};
	
page.exit=function(){
	testForm=null;
}
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#testSingleTreejs').html(),$('#testSingleTreehtml').html())">试一试</a>
		</div>
	</div>
	<div title="延迟加载">
		<div style='padding-left:30px'>
			<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
				<ul id="tree_lazyload" style="width:100%;height: 398px;"></ul>
	      	</div>
			<div class="clear"></div>
			<br>
			<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='tree_lazyload_demo_html'>
		&lt;div  style="width:26%; float:left; padding: 2px 15px 30px 8px"&gt;
			&lt;ul id="tree_lazyload_demo" style="width:100%;height: 398px;"&gt;&lt;/ul&gt;
	      	&lt;/div&gt; 
       		</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='tree_lazyload_demo_js'>
var setting={
				keepParent:true,
				simpleData:{
					idKey:"siteNodeId", /**节点数据中保存唯一标识的属性名称*/
					rootPId:"0" /**根节点父节点id，即根节点 pIdKey 指定的属性值*/
				},
				/*<span style="color:red!important;"> 核心代码(仅供参考) begin  */
				onExpand : function(event, treeId, treeNode) {
					if (treeNode._loaded)
						return;
					treeNode._loaded = true;//标识是否加载
					var treeObj = $.fn.zTree.getZTreeObj(treeId);
					treeObj.removeChildNodes(treeNode);
					Ccay.doGet("services/manage/sitemap/tree/list?parentId={0}".formatURI(treeNode.siteNodeId),"",function(datas){
						$.each(datas||[],function(i,d){
							d.hasChild && (d.isParent = true);
							d.name = Ccay.Format.formatSpace(Ccay.DataHelper.languageExtraction(d.name+""));
						});
						treeObj.addNodes(treeNode, datas||[]);
					});
				}
				/* 核心代码 end</span> */
			};    
		Ccay.doGet("services/manage/sitemap/tree/list",null,function(datas){
			datas = datas.splice(0,1);
			$.each(datas,function(i,d){
				d.name = Ccay.Format.formatSpace(Ccay.DataHelper.languageExtraction(d.name+""));
			});
			$S('#tree_lazyload_demo').ccayTree(datas,setting,function(data){});
		});
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#tree_lazyload_demo_js').html(),$('#tree_lazyload_demo_html').html())">试一试</a>
		</div>
		</div>
	</div>
	<div title="Radio单选树">
	<div style='padding-left:30px'>
		<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	<ul id="radioSingleTree" style="width:100%;height: 398px;"></ul>
       </div>
      </div>
      &nbsp;&nbsp;<input onclick="Ccay.example.ui.tree.getSelectedNodes($('#radioSingleTree'));" value=' 点击我查看选中的树节点 ' type=button />
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='radioSingleTreehtml'>
&lt;div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	&lt;ul id="testRadioSingleTree" style="width:100%;height: 398px;">&lt;/ul>
&lt;/div> 
&lt;input onclick="Ccay.example.ui.tree.getSelectedNodes($('#testRadioSingleTree'));" value=' 点击我查看选中的树节点 ' type=button />   
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='radioSingleTreejs'>
/**radio单选树实现*/
function testInitSiteMapRadioTree(fn){
	var  setting={
		checkType:"single", /**设置radio按钮*/
		expandLevel:"0", /**设置树形展开的层级*/
		filter:true, /**设置顶端的搜索框*/
	};  
	$S('#testRadioSingleTree').ccayTree("services/manage/registry/list",setting,fn);
}
testInitSiteMapRadioTree();
/**
 * 获取选中的树节点
 * @param treeContainer: tree的jQyery dom容器
 * @returns 返回树选中的树节点的数组
 */
page.getSelectedNodes = function(treeContainer){
	var tree = treeContainer.getCcayTreeManager();
	if (!tree.getCheckedNodes()) {
		alert("您没有选中任何树节点！");
		return [];
	}
	var nodes = tree.getCheckedNodes();
	alert("您选中了" + nodes.length + "个树节点，节点数据为：" + JSON.stringify(nodes));
	return nodes;
};
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#radioSingleTreejs').html(),$('#radioSingleTreehtml').html())">试一试</a>
		</div>
	</div>
	<div title="checkbox多选树">
	<div style='padding-left:30px'>
		<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	<ul id="multiTree" style="width:100%;height: 398px;"></ul>
       </div>
       </div>
       &nbsp;&nbsp;<input onclick="Ccay.example.ui.tree.getSelectedNodes($('#multiTree'));" value=' 点击我查看选中的树节点 ' type=button />
		<div class="clear"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='multiTreeHtml'>
&lt;div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	&lt;ul id="testMultiTree" style="width:100%;height: 398px;">&lt;/ul>
&lt;/div> 
&lt;input onclick="_getSelectedNodes($('#testMultiTree'));" value=' 点击我查看选中的树节点 ' type=button />   
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='multiTreeJs'>
/**checkbox多选树数实现*/
function testInitSiteMapCheckboxTree(fn){
	var setting = {
			expandLevel:"0", /**设置树形展开的层级*/
			filter: true, /**设置顶端的搜索框*/
 			checkType:"checkbox", /**设置checkbox按钮*/
			key: {
				check:"checked", /**节点数据中保存check状态的属性名称，此处指定为checked*/
				name: "name", /**节点数据中保存节点名称的属性名称，此处指定为name*/
				children: "children", /**节点数据中保存子节点数据的属性名称，此处指定children*/
				title: "name" /**节点数据中保存提示信息的属性名称，此处指定为name*/
			}
		};
	setting.checkboxType = {"Y":"ps","N":"ps"}; /**设置父子之间联动*/
	$S('#testMultiTree').ccayTree("services/manage/registry/list",setting,fn);		
}
testInitSiteMapCheckboxTree();
/**
 * 获取选中的树节点
 * @param treeContainer: tree的jQyery dom容器
 * @returns 返回树选中的树节点的数组
 */
_getSelectedNodes = function(treeContainer){
	var tree = treeContainer.getCcayTreeManager();
	if (!tree.getCheckedNodes()) {
		alert("您没有选中任何树节点！");
		return [];
	}
	var nodes = tree.getCheckedNodes();
	alert("您选中了" + nodes.length + "个树节点，节点数据为：" + JSON.stringify(nodes));
	var ids=[],names=[];
	$.each(nodes,function(){
		ids.push(this.siteNodeId);
		names.push(this.name);
	});
	alert("节点id数据为："+ids+"；"+ "节点name数据为："+names);
	return nodes;
};
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#multiTreeJs').html(),$('#multiTreeHtml').html())">试一试</a>
		</div>
	</div>
	<div title="自定义节点图标的树">
	<h4><span>实例：利用css样式进行图标的设定</span></h4>
	<div style='padding-left:30px'>
		<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	<ul id="cssIconTree" style="width:100%;height: 398px;"></ul>
       </div>
		<div class="clear"></div>
		<div><pre>
说明：利用css样式进行树节点图标设定的方法为：
1、在每个树节点数据设置iconSkin属性，如iconSkin:"diy01"
2、在对应的ccs样式中设置background属性，树节点各个状态对应的样式名如下：  
	a)树节点展开时的图片样式名为：.ztree li span.button.{iconSkin属性名}_ico_open，如：.ztree li span.button.diy01_ico_open
	b)树节点收起时的图片样式名为：.ztree li span.button.{iconSkin属性名}_ico_close，如：.ztree li span.button.diy01_ico_close
	c)树叶子节点的图片样式名为：.ztree li span.button.{iconSkin属性名}_ico_docu，如：.ztree li span.button.diy01_ico_docu
		</pre></div>
		<h3>html 源码:</h3>
		<div class="codeArea">
		<pre id='cssIconTreeHtml'>
&lt;div style="width:26%; float:left; padding: 2px 15px 30px 8px">
	&lt;ul id="testCssIconTree" style="width:100%;height: 398px;">&lt;/ul>
&lt;/div>    
       </pre>
		</div>
		<h3>css 源码:</h3>
		<div class="codeArea">
			<pre id='iconTreeCss'>
/**树节点展开时的图片样式*/
.ztree li span.button.diy01_ico_open{margin-right:2px; background: url('ccay/web/resource/skins/default/plugins/ztree/img/diy/1_open.png') no-repeat;}
/**树节点收起时的图片样式*/
.ztree li span.button.diy01_ico_close{margin-right:2px; background: url('ccay/web/resource/skins/default/plugins/ztree/img/diy/1_close.png') no-repeat;}
/**树叶子节点的图片样式*/
.ztree li span.button.diy01_ico_docu{margin-right:2px; background: url('ccay/web/resource/skins/default/plugins/ztree/img/diy/3.png')  no-repeat;}
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='cssIconTreeJs'>
/**初始化CSS设定图标的树*/
var testCssIconTreeData = function(){
var data=[
	{name: '节点1',iconSkin:"diy01",children:[
		{ name: '节点1.1',iconSkin:"diy01" },
		{ name: '节点1.2',iconSkin:"diy01" },
		{ name: '节点1.3',iconSkin:"diy01", children: [
			{ name: '节点1.3.1',iconSkin:"diy01" },
			{ name: '节点1.3.2' ,iconSkin:"diy01"}
		]
		},
		{ name: '节点1.4',iconSkin:"diy01" }
	]
	},
	{ name: '节点2' ,iconSkin:"diy01"},
	{ name: '节点3',iconSkin:"diy01" },
	{ name: '节点4' ,iconSkin:"diy01"}
];
	return data;
};
$S('#testCssIconTree').ccayTree(testCssIconTreeData());
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#cssIconTreeJs').html(),$('#cssIconTreeHtml').html())">试一试</a>
		</div>
	</div>
	<h4><span>实例2：在树的节点数据中进行图标的设定</span></h4>
	<div style='padding-left:30px'>
		<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
	<ul id="iconTree" style="width:100%;height: 398px;"></ul>
       </div>
		<div class="clear"></div>
		<div><pre>
说明：利用树的节点数据进行图标设定，只需设置对应的节点数据的属性为相应图标的url即可，树节点各个状态对应的节点数据属性如下：：  
	a)树节点展开时的图片属性：iconOpen
	b)树节点收起时的图片属性：iconClose
	c)树叶子节点的图片属性：icon
		</pre></div>
		<h3>html 源码:</h3>
		<div class="codeArea">
		<pre id='iconTreeHtml'>
&lt;div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
&lt;ul id="testIconTree" style="width:100%;height: 398px;">&lt;/ul>
&lt;/div>    
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='iconTreeJs'>
/**初始化数据设定图标的树*/
var testIconTreeData = function(){
	/**设置树节点展开时的图标*/
	var iconOpen="ccay/web/resource/skins/default/plugins/ztree/img/diy/3.png";
	/**设置树节点收起时的图标*/
	var iconClose="ccay/web/resource/skins/default/plugins/ztree/img/diy/7.png";
	/**设置树叶子节点的图标*/
	var icon="ccay/web/resource/skins/default/plugins/ztree/img/diy/5.png";
	var data = [];
	data.push({ id: 1, pid: 0, name: '1' , iconOpen:iconOpen, iconClose:iconClose});
	data.push({ id: 2, pid: 1, name: '1.1' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 4, pid: 2, name: '1.1.2' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 5, pid: 2, name: '1.1.2' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});      
 
	data.push({ id: 10, pid: 8, name: 'wefwfwfe' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 11, pid: 8, name: 'wgegwgwg' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 12, pid: 8, name: 'gwegwg' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
 
	data.push({ id: 6, pid: 2, name: '1.1.3',iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 7, pid: 2, name: '1.1.4' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 8, pid: 7, name: '1.1.5' ,iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	data.push({ id: 9, pid: 7, name: '1.1.6',iconOpen:iconOpen, iconClose:iconClose,icon:icon});
	return data;
};
$S('#testIconTree').ccayTree(testIconTreeData(), {simpleData:{idKey:"id",pIdKey:"pid",rootPId:0}});
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#iconTreeJs').html(),$('#iconTreeHtml').html())">试一试</a>
		</div>
	</div>
</div>
	<div title="弹出树">
	<h4><span>实例1：单选弹出树</span></h4>
	<div style='padding-left:30px'>
		<div class="ccay-form-body">
		<ul>
			<li class="ccay-form-row ccay-form-longcell ">
			  <samp>单选弹出树：</samp>
			  <span class='ccay-form-input'>
			    hidden:<input type="text" id="id11">
				visible:<input type="text" id="name11">
				<input type="button" class="button" id="btnSingle" value="..."  onclick="Ccay.example.ui.tree.popupSingleTree()">
			  </span>
			</li>
		</ul>
		</div>
		<div class="clear"></div>
		<div><span><br>说明：单选弹出树请将Ccay.Component.popupTree(title,dataOrUrl,options,selectCallback,width,height)函数的options参数的checkType属性设置为"single"</span></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
		<pre id='popupSingleTreeHtml'>
&lt;div class="ccay-form-body">
	&lt;ul>
		&lt;li class="ccay-form-row ccay-form-longcell ">
			&lt;samp>单选弹出树：&lt;/samp>
			&lt;span class='ccay-form-input'>
				hidden:&lt;input type="text" id="tid11">
				visible:&lt;input type="text" id="tname11">
				&lt;input type="button" class="button" id="btnSingle" value="..."  onclick="testPopupSingleTree()">
			&lt;/span>
		&lt;/li>
	&lt;/ul>
&lt;/div>  
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='popupSingleTreeJs'>
/**单选弹出树*/
testPopupSingleTree = function(){
	var  setting={
		expandLevel:1,/**默认展开1级节点*/
		checkType:"single",
		simpleData:{
			idKey:"propertyId",
			pIdKey:"parentId",
			rootPId:"0"
		}	
	};  
  	Ccay.Component.popupTree("ccay.sitemap.selectparent","services/manage/registry/list",setting,function(nodes){
		if(nodes.length>0){
			$("#tid11").val(nodes[0].registryItemName);
			$("#tname11").val(nodes[0].name);
		}
	});
};
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#popupSingleTreeJs').html(),$('#popupSingleTreeHtml').html())">试一试</a>
		</div>
	</div>
	<h4><span>实例2：多选弹出树</span></h4>
	<div style='padding-left:30px'>
		<div class="ccay-form-body">
		<ul>
			<li class="ccay-form-row ccay-form-longcell">
			  <samp>多选弹出树：</samp>
			  <span class='ccay-form-input'>
			    hidden:<input type="text" id="id21">
				visible:<input type="text" id="name21">
				<input type="button" class="button" id="btnMulti" value="..." onclick="Ccay.example.ui.tree.popupMultiTree()">
			  </span>
			</li>
		</ul>
		</div>
		<div class="clear"></div>
		<div><span><br>说明：多选弹出树请将Ccay.Component.popupTree(title,dataOrUrl,options,selectCallback,width,height)函数的options参数的checkType属性设置为不等于"single"的其他非空字符串</span></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
		<pre id='popupMultiTreeHtml'>
&lt;div class="ccay-form-body">
	&lt;ul>
		&lt;li class="ccay-form-row ccay-form-longcell">
			&lt;samp>多选弹出树：&lt;/samp>
			&lt;span class='ccay-form-input'>
				hidden:&lt;input type="text" id="tid22">
				visible:&lt;input type="text" id="tname22">
				&lt;input type="button" class="button" id="btnMulti" value="..." onclick="testPopupMultiTree()">
			&lt;/span>
		&lt;/li>
	&lt;/ul>
&lt;/div>  
       </pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='popupMultiTreeJs'>
/**多选弹出树*/
testPopupMultiTree = function(){
	var  setting={
		expandLevel:1,/**默认展开1级节点*/
		checkType:"multi",
		checkboxType: {"Y":"ps","N":"ps"}, /**设置父子之间联动*/
		/*<font color='red'>回选，需设置selectField和selectItems</font>*/
		selectField:"propertyId",
		selectItems:$("#tid22").val().split(","),
		simpleData:{
			idKey:"propertyId",
			pIdKey:"parentId",
			rootPId:"0"
		}	
	};  
  	Ccay.Component.popupTree("ccay.sitemap.selectparent","services/manage/registry/list",setting,function(nodes){
  		var ids=[],names=[];
		$.each(nodes,function(){
			ids.push(this.registryItemName);
			names.push(this.name);
		});
		$("#tid22").val(ids.join(","));
		$("#tname22").val(names.join(","));
	});
};
</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#treeTab',$('#popupMultiTreeJs').html(),$('#popupMultiTreeHtml').html())">试一试</a>
		</div>
	</div>
</div>
	<div title="重命名 & 直接添加 子节点& 弹出编辑  &  拖拽">
        <div  style="width:50%; float:left; padding: 2px 15px 30px 8px">
	      <ul id="treewithmenu" style="width:100%;height: 398px;"></ul>
        </div>
		<div class="clear"></div>
		<br>
		<h3>html 代码：</h3>
		<div class="codeArea" >
		   <pre>
&lt;div  style="width:50%; float:left; padding: 2px 15px 30px 8px">
   &lt;ul id="treewithmenu" style="width:100%;height: 398px;">&lt;/ul>
&lt;/div></pre>
		</div>
		<br>
		<h3>js 源码 主要事件设置:</h3>
		<div class="codeArea">
			<pre>
var  setting={
	// 添加添加节点按钮 与removeHoverDom配合使用
	addHoverDom: function(treeId, treeNode){}, 
	// 移除添加节点按钮
	removeHoverDom: functionm(treeId, treeNode){},
	// 设置点击节点触发函数
	onClick:function(event, treeId, treeNode){}, 
	// 设置是否显示删除按钮  与onRemove配合使用
	showRemoveBtn:true,
	// 设置点击删除节点按钮触发函数
	onRemove: function(treeId, treeNode){}, 
	// 设置是否显示重命名按钮 与onRename配合使用
	showRenameBtn:true,
	// 设置点击重命名按钮触发函数
	onRename: function(treeId, treeNode,newName){},
	// 设置拖拽触发函数
	onDrop: function(event, treeId, treeNode){}
};	
            </pre>
		</div>
        <br>
		<h3>添加节点旁的按钮区设置 :addHoverDom:</h3>
		<div class="codeArea">
			<pre>
addHoverDom:function(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
		// 添加子节点按钮的html
		var addStr = "&lt;button type='button' class='add' id='addBtn_" + treeNode.id
			+ "' title='add node' onfocus='this.blur();'>&lt;/button>";
		// 编辑节点按钮的html
		var editStr = "&lt;button type='button' class='edit' id='editBtn_" + treeNode.id
			+ "' title='update node' onfocus='this.blur();'>&lt;/button>";
				sObj.append(addStr).append(editStr);
		
		var btn = $("#addBtn_"+treeNode.id);
		// 添加子节点按钮的事件
		if (btn) btn.bind("click", function(){
			var zTree = $S('#treewithmenu').getCcayTreeManager();	
			var nodeName = "new node"+(newCount++);
			zTree.addNodes(treeNode, {parentId:treeNode.id, name:nodeName});
			Ccay.Common.save(true,"services/ccay/demo/tree/edit",
			  {parentId:treeNode.id, name:nodeName},
			  function(){	
			initTreeWithRmenu(function(){
			 var treeObject=$S('#treewithmenu').getCcayTreeManager();
			 var node=treeObject.getNodeByParam("id",treeNode.id);
			 treeObject.selectNode(node);
			 treeObject.expandNode(node,true);
			});	
					Ccay.UI.topBox("添加成功");
			})	
			return false;
		});
		var editbtn = $("#editBtn_"+treeNode.id);
		// 编辑节点按钮的事件
		if (editbtn) editbtn.bind("click", function(){
			var zTree = $S('#treewithmenu').getCcayTreeManager();	
			Ccay.Page.register("Ccay.example.tree.edit","ccay/example/ui/tree/editTree.html");
			Ccay.Common.openPage("编辑",
                        "Ccay.example.tree.edit",
                       { width:500,
                         height:180, 
                         buttons:[{text:"ccay.common.button.save",onClick:function(){
	                          Ccay.Common.formSave('#treeForm',
	                               "services/ccay/demo/tree/edit",false,
	                               function(){		
	                          	    Ccay.example.tree.edit.closeDialog();
	                          	    initTreeWithRmenu(function(){
	                          	     var treeObject=$S('#treewithmenu').getCcayTreeManager();
	                          	     var node=treeObject.getNodeByParam("id",treeNode.id);
	                          	     treeObject.selectNode(node);
	                          	     treeObject.expandNode(node,true);
	                          	     });
	                          	   Ccay.UI.topBox("重命名成功");
							  })
                         }},
			            {text:"ccay.common.button.cancel",
			             onClick:function(){Ccay.example.tree.edit.closeDialog()}}]
			        },         
			         function(){
			          $S("#treeForm").jsonData(treeNode);
			          $S("#treeForm").nameChild("parentName").val(treeNode.getParentNode().name);
			});
			return false;
		});
};			
			</pre>
		</div>	
		<br>
		<h3>移除节点旁的按钮区设置:removeHoverDom</h3>
		<div class="codeArea">
			<pre>
removeHoverDom: functionm(treeId, treeNode) {
			$("#addBtn_"+treeNode.id).unbind().remove();
			$("#editBtn_"+treeNode.id).unbind().remove();
	  };		
			</pre>
		</div>
		<br>
		<h3>删除按钮的事件设置:onRemove</h3>
		<div class="codeArea">
			<pre>
onRemove: function(treeId, treeNode){
	if(treeNode.isParent) {
		Ccay.UI.showMessage("ccay.security.message.canNotDelete","warn");
		return false;
	}else{
		Ccay.UI.confirm("ccay.security.message.confirmDelete",function(bool){
			if(bool){
				Ccay.doDelete("services/ccay/demo/tree/delete",
				  {id:treeNode.id,name:treeNode.name},
				  function(){
					Ccay.UI.topBox("ccay.common.message.deleteSuccess");
					var treeObject=$S('#treewithmenu').getCcayTreeManager();
					treeObject.removeNode(treeNode);
				});	
			}
		});
	}
}, 			
			</pre>
		</div>
		<br>
		<h3>拖拽事件设置:onDrop</h3>
		<div class="codeArea">
			<pre>
onDrop: function(event, treeId, treeNode){
	    	if(treeNode){
				Ccay.Common.save(false,"services/ccay/demo/tree/edit",treeNode[0],
				  function(){				
					Ccay.UI.topBox("拖拽数据成功");
				});
	    	}
        },
			</pre>
		</div>
		<br>
	</div>
	<div title="点击即勾选">
		<div style='padding-left:30px'>
			<div>在ccayTree的setting中设置：<font color="red">1、click2Check：true；2、联动状态配合checkboxType设置</font></div>
			<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
				<ul id="click2checkTree_single" style="width:100%;height: 398px;"></ul>
	      	</div>
			<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
				<ul id="click2checkTree_multi" style="width:100%;height: 398px;"></ul>
	      	</div>
			<div class="clear"></div>
			<br>
		</div>
	</div>	
	<div title="展开&收起事件">
		<div style='padding-left:30px'>
			<div>在ccayTree的setting中设置：
			<p><font color="red">1、beforeCollapse：{Function}收缩前事件，若return false可阻止节点收缩；</p><p>2、onCollapse：{Function}收缩事件</p></font></div>
			<div  style="width:26%; float:left; padding: 2px 15px 30px 8px">
				<ul id="tree_collapse" style="width:100%;height: 398px;"></ul>
	      	</div>
			<div class="clear"></div>
			<br>
		<h3>关键js代码：</h3>
		<div class="codeArea" >
		   <pre>
// 收起前事件
beforeCollapse:function(treeId, treeNode){
	// do something
	// return false; 如果返回false时，此节点不可收起，onCollapse这个事件不会触发
},
// 收起事件
onCollapse:function(event, treeId, treeNode){
	// do something
}
// 展开前事件
beforeExpand:function(treeId, treeNode){
	// do something
	//	return false;如果返回false时，此节点不可展开，onExpand这个事件不会触发
}
// 展开事件
onExpand:function(event, treeId, treeNode){
	// do something
}
</pre>
		</div>
		</div>
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
	    <ul>
	    </ul>
	</div>     
	<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	            <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	                          <samp class="i18n" i18nKey=""></samp>                          
	                         <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
	</div>
	  </form>                    
	</div>
</div>
